
<template>

    <div>
        <div class="radius-container">
            <div class="border-b pad-10 font-w font-15 topbar-style">基本信息</div>
            <div class="pad-20">
                <el-form :model="form" label-width="100px" :rules="rules" ref="form">
                    <el-form-item label="任务名称：" prop="taskName">
                        <el-input v-model="form.taskName" class="input-bar-4" placeholder="请输入任务名称，例如：淘宝店铺详情页设计"/>
                    </el-form-item>
                    <div class="radio-top-bar">
                      <el-form-item v-if="form.taskType==1" label="任务酬金：" prop="remunerationType">
                        <el-radio-group v-model="form.remunerationType" @change="remunerationTypeChange(form.remunerationType)">
                          <div class="flex v-align-c">
                              <template v-for="(value,key) in dict.remunerationType">
                                  <div class="gray-active" :class="key===form.remunerationType?'active':''">
                                      <el-radio :label="key">{{value}}</el-radio>
                                  </div>
                              </template>
                          </div>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                    <div class="gray-bar" >
                        <template v-if="form.taskType==1 && form.remunerationType==1">
                          <div class="flex v-align-c gray-bar" >
                            <el-form-item label="预算：" class="input-bar-1" prop="budgetAmount" >
                                <el-input v-model="form.budgetAmount" placeholder="请输入您的酬金预算" min="0" class="width-input-1" @change="budgetAmountChange()"></el-input>
                            </el-form-item>

                            <el-form-item label="数量：" class="input-bar-2" prop="budgetNum">
                                <el-input v-model="form.budgetNum" placeholder="请输入数量" min="1" class="width-input-3"></el-input>
                                <el-input v-model="form.budgetUnit" placeholder="单位，如：件/张" class="width-input-3 mar-r-10" />
                                单价：<span class="pad-l-5 pad-r-5">{{form.budgetAmount / form.budgetNum | estimateFilter }} </span> 元/{{form.budgetUnit}}
                            </el-form-item>
                          </div>
                          <div class="v-align-c gray-bar">
                            <el-form-item label="类型：" prop="remunerationTypeModel">
                              <el-radio-group v-model="form.remunerationTypeModel" @change="remunerationTypeModelChange()">
                                <template v-for="(value,key) in dict.remunerationTypeModel">
                                  <el-radio :label="key">{{value}}</el-radio>
                                </template>
                              </el-radio-group>
                            </el-form-item>
                          </div>

                        </template>
                        <template v-if="form.taskType==1 && form.remunerationType==2">
                            <el-form-item label="预算：" class="input-bar-3" prop="budgetAmount">
                                <el-input v-model="form.budgetAmount" placeholder="请输入价格" class="width-input-2" @change="budgetAmountChange()"></el-input>
                                <el-button class="mar-l-15" type="primary" @click="estimateLayer">快速估价</el-button>
                            </el-form-item>
                        </template>
                    </div>


                  <el-form-item v-if="form.taskType==2" label="任务酬金：" prop="budgetAmount">
                    <el-input v-model="form.budgetAmount" min="0" type="number" placeholder="请输入您对该项目的总酬金预算" class="el-input" > <template slot="append">元</template></el-input>
                  </el-form-item>

                  <el-form-item v-if="form.taskType==2" label="组长酬金：" prop="leaderAmount">
                    <el-input v-model="form.leaderAmount" min="0" type="number" placeholder="请输入您给项目组长的酬金或预算" class="el-input"> <template slot="append">元</template></el-input>
                  </el-form-item>

                    <el-form-item label="报名时间：" prop="enrollStartTime" v-show="enrollStartTimeFlag" ref="enrollStartTimeForm">

                        <el-date-picker
                          v-model="form.enrollStartTime"
                          align="right"
                          type="date"
                          class="width-date mar-r-10"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :picker-options="pickerOptions1">
                        </el-date-picker>

                        <el-date-picker
                          v-model="form.enrollEndTime"
                          align="right"
                          type="date"
                          class="width-date mar-r-10"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :picker-options="pickerOptions2">
                        </el-date-picker>

                    </el-form-item>

                    <el-form-item label="任务周期：" prop="taskStartTime" >
                        <el-date-picker
                          v-model="form.taskStartTime"
                          align="right"
                          type="date"
                          class="width-date mar-r-10"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :picker-options="pickerOptions3">
                        </el-date-picker>
                        <el-date-picker
                          v-model="form.taskEndTime"
                          align="right"
                          type="date"
                          class="width-date mar-r-10"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :picker-options="pickerOptions4">
                        </el-date-picker>

                    </el-form-item>

                </el-form>
            </div>
        </div>

      <!-- 快速估价 -->
        <el-dialog :title="estimate.title" :visible.sync="estimateVisible" :close-on-press-escape="true" width="880px">
          <el-form :model="formEstimate" label-width="100px" :rules="rulesEstimate" ref="formEstimate" class="pad-t-10 pad-l-30 pad-r-30">
            <div class="flex v-align-c estimate-bar" v-for="(item, key) in estimateData">
              <el-radio v-model="estimateRadio" :label="item.label" class="estimate-radio"></el-radio>

              <div class="estimate-input">
                <el-form-item :label="item.priceName" class="estimate-item">
                  <el-col :span="16">
                    <el-input v-model="item.priceVal" min="0" type="number" class="el-input-default" > <template slot="append">元</template></el-input>
                  </el-col>
                </el-form-item>
                <div class="font-12 font-gray font-tips">例如：3000元，则输入3000</div>
              </div>

              <span class="align-r font-x font-18">X</span>
              <div class="estimate-input">
                <el-form-item :label="item.percentName" class="estimate-item">
                  <el-col :span="16">
                    <el-input v-model="item.percentVal" min="0" type="number" class="el-input-default" > <template slot="append">%</template></el-input>
                  </el-col>
                </el-form-item>
                <div class="font-12 font-gray font-tips">例如：80%，则输入80</div>
              </div>

              <span class="pad-l-10">=</span>
              <span class="pad-l-10">任务酬金：</span>
              <span class="align-c">{{item.totalVal}}
                   {{item.priceVal *  item.percentVal / 100 | estimateFilter }}
              </span>
              <span class="pad-l-10">元</span>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="estimateVisible = false">取消</el-button>
            <el-button type="primary" @click="estimateSubmit(estimateRadio)" >确认提交</el-button>
          </div>
        </el-dialog>
    </div>


</template>


<script>
  import { getEditTaskInfo } from '@/api/project/taskInfo'

  export default {
    props: ['taskId'],
    data() {
      return {
        form: {
          taskName: '',
          taskType: '1', // 任务模式: 1.单一任务 2.协同任务
          remunerationType: '1', // 任务酬金类型: 1.计件 2.悬赏
          bargainingFlag: '0',
          budgetAmount: '',
          budgetNum: '',
          budgetUnit: '件',
          leaderAmount: '',
          taskStartTime: '',
          taskEndTime: '',
          enrollStartTime: '',
          enrollEndTime: '',
          remunerationTypeModel: '11'
        },
        enrollStartTimeFlag: true,
        value3: 0,
        rules: {
          taskName: [
            { required: true, message: '请输入任务名称', trigger: 'blur' },
            { max: 255, message: '长度最多输入 255 个字符' }
          ],
          remunerationType: [
            { required: true, message: '请输入预算金额', trigger: 'blur' }
          ],
          budgetAmount: [
            { required: true, message: '请输入预算金额', trigger: 'blur' },
            { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/, message: '请输入正确金额' }
          ],
          budgetNum: [
            { required: true, message: '请输入数量', trigger: 'blur' },
            { pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入正整数' }
          ],
          budgetAmount2: [
            { required: true, message: '请输入预算', trigger: 'blur' },
            { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/, message: '请输入正确金额' }
          ],
          leaderAmount: [
            { required: true, message: '组长不能为空', trigger: 'blur' }
          ],
          bargainingFlag: [
            { required: true, message: '是否可议价', trigger: 'blur' }
          ],
          taskStartTime: [
            { required: true, message: '请输入任务周期', trigger: 'blur' }
          ],
          taskEndTime: [
            { required: true, message: '请输入任务周期', trigger: 'blur' }
          ],
          enrollStartTime: [
            { required: true, message: '请输入报名时间', trigger: 'blur' }
          ],
          enrollEndTime: [
            { required: true, message: '请输入报名时间', trigger: 'blur' }
          ],
          remunerationTypeModel: [
            { required: true, message: '类型不能为空', trigger: 'blur' }
          ]
        },
        // 快速估价
        estimateData: [],
        estimate: {},
        estimateVisible: false,
        estimateRadio: '1',
        formEstimate: {
          memberId: '',
          amount: null,
          remark: null,
          taskId: this.taskId,
          enterpriseId: this.getEnterpriseId()
        },
        dict: {},
        rulesEstimate: {
          memberId: [
            { required: true, message: '请选择微客！', trigger: 'blur' }
          ],
          amount: [
            { required: true, message: '请填写追加酬金！', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写验收内容！', trigger: 'blur' }
          ]
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.form.enrollEndTime && this.form.taskStartTime) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > new Date(this.form.taskStartTime) || time.getTime() > new Date(this.form.enrollEndTime)
            }
            if (this.form.enrollEndTime) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > new Date(this.form.enrollEndTime)
            }
            if (this.form.taskStartTime) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > new Date(this.form.taskStartTime)
            }
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        pickerOptions2: {
          disabledDate: (time) => {
            if (this.form.enrollStartTime && this.form.taskStartTime) {
              return time.getTime() < new Date(this.form.enrollStartTime) || time.getTime() > new Date(this.form.taskStartTime)
            }

            if (this.form.enrollStartTime) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() < new Date(this.form.enrollStartTime)
            }

            if (this.form.taskStartTime) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > new Date(this.form.taskStartTime)
            }
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        pickerOptions3: {
          disabledDate: (time) => {
            if (this.form.enrollEndTime && this.form.taskEndTime) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() < new Date(this.form.enrollEndTime) || time.getTime() > new Date(this.form.taskEndTime)
            }
            if (this.form.taskEndTime) {
              return time.getTime() < Date.now() || time.getTime() > new Date(this.form.taskEndTime)
            }
            if (this.form.enrollEndTime) {
              return time.getTime() < Date.now() || time.getTime() < new Date(this.form.enrollEndTime)
            }
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        pickerOptions4: {
          disabledDate: (time) => {
            if (this.form.enrollEndTime && this.form.taskStartTime) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() < new Date(this.form.taskStartTime) || time.getTime() < new Date(this.form.enrollEndTime)
            }
            if (this.form.taskEndTime) {
              return time.getTime() < Date.now() || time.getTime() < new Date(this.form.taskEndTime)
            }
            if (this.form.enrollEndTime) {
              return time.getTime() < Date.now() || time.getTime() < new Date(this.form.enrollEndTime)
            }
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    // 初始化页面
    created() {
      console.log('taskinfo')
      if (this.$utils.isExist(this.taskId)) {
        this.initTaskInfo()
      }
    },
    mounted() {
      const that = this
      // 初始化数据
      this.busListener()
      this.estimateData = [
        {
          label: '1',
          priceName: '市场价：',
          priceVal: null,
          percentName: '内部折扣：',
          percentVal: null,
          totalVal: null
        },
        {
          label: '2',
          priceName: '销售额：',
          priceVal: null,
          percentName: '分配比例：',
          percentVal: null,
          totalVal: null
        },
        {
          label: '3',
          priceName: '岗位月薪：',
          priceVal: null,
          percentName: '项目周期：',
          percentVal: null,
          totalVal: null
        }
      ]
      // 监听数据字典
      this.$bus.$on('task.edit.dict', function(data) {
        that.dict = data
      })
    },
    filters: {
      estimateFilter(e) {
        if (e === Infinity) {
          return 0
        } else if (isNaN(e)) {
          return 0
        } else {
          const num = Number(parseFloat(e).toFixed(3).slice(0, -1))
          return num
        }
      }
    },
    methods: {
      // 快速估价
      estimateLayer() {
        this.estimateVisible = true
        this.estimate.title = '快速估价'
      },
      initTaskInfo() {
        const that = this

        const data = {
          taskId: this.taskId
        }

        getEditTaskInfo(data).then(response => {
          that.form.taskType = response.data.taskType + ''
          that.form.taskName = response.data.taskName
          // 任务酬金类型: 1.计件 2.悬赏
          that.form.budgetAmount = that.$utils.isExist(response.data.budgetAmount) ? response.data.budgetAmount : 0
          that.form.budgetNum = that.$utils.isExist(response.data.budgetNum) ? response.data.budgetNum : 0
          that.form.taskStartTime = that.$utils.isExist(response.data.taskStartTime) ? response.data.taskStartTime : ''
          that.form.taskEndTime = that.$utils.isExist(response.data.taskEndTime) ? response.data.taskEndTime : ''
          that.form.enrollStartTime = that.$utils.isExist(response.data.enrollStartTime) ? response.data.enrollStartTime : ''
          that.form.enrollEndTime = that.$utils.isExist(response.data.enrollEndTime) ? response.data.enrollEndTime : ''
          that.form.leaderAmount = that.$utils.isExist(response.data.leaderAmount) ? response.data.leaderAmount : ''
          that.form.bargainingFlag = that.$utils.isExist(response.data.bargainingFlag) ? response.data.bargainingFlag + '' : '0'
          that.form.remunerationType = that.$utils.isExist(response.data.remunerationType + '') ? response.data.remunerationType + '' : ''
          that.form.budgetUnit = that.$utils.isExist(response.data.budgetUnit) ? response.data.budgetUnit : ''
          that.form.remunerationTypeModel = that.$utils.isExist(response.data.remunerationTypeModel) ? response.data.remunerationTypeModel + '' : '11'

          const remunerationType = that.$utils.isExist(response.data.remunerationType + '') ? response.data.remunerationType + '' : ''
          this.$bus.$emit('project.task.edit.remunerationType', remunerationType)
          this.showAcceptRule()
        })
      },
      busListener() {
        const that = this
        this.$bus.$on('project.task.edit.taskType', function(data) {
          that.form.taskType = data + ''
          if (that.form.taskType === '1') {
            // 单一任务，协同任务的酬金非必填
            that.rules.leaderAmount.required = false
          } else {
            that.rules.leaderAmount.required = true
          }
        })
      },
      remunerationTypeChange(e) {
        this.budgetAmountChange()
        this.$bus.$emit('project.task.edit.remunerationType', e)
        this.showAcceptRule()
        if (this.form.remunerationType === '1') {
          this.form.remunerationTypeModel = '11'
        }
      },
      remunerationTypeModelChange() {
        this.showAcceptRule()
      },
      showAcceptRule() {
        if (this.form.remunerationType === '1' && this.form.remunerationTypeModel === '12') {
          this.$bus.$emit('project.task.edit.remunerationTypeModel', true)
          this.enrollStartTimeFlag = false
          this.form.enrollStartTime = ''
          this.form.enrollEndTime = ''
        } else {
          this.$bus.$emit('project.task.edit.remunerationTypeModel', false)
          this.enrollStartTimeFlag = true
        }
      },
      getNowFormatDate() {
        const date = new Date()
        const seperator1 = '-'
        const seperator2 = ':'
        let month = date.getMonth() + 1
        let strDate = date.getDate()
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = '0' + strDate
        }
        const currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds()
        return currentdate
      },
      checkForm() {
        // 需要校验的集合
        const checkArrays = []
        checkArrays.push('taskName')
        checkArrays.push('remunerationType')
        checkArrays.push('budgetAmount')
        checkArrays.push('budgetNum')
        checkArrays.push('budgetAmount2')
        checkArrays.push('leaderAmount')
        checkArrays.push('bargainingFlag')
        checkArrays.push('taskStartTime')
        checkArrays.push('taskEndTime')

        if (this.form.remunerationType === '1' && this.form.remunerationTypeModel === '12') {
          checkArrays.push('remunerationTypeModel')
        } else {
          checkArrays.push('enrollStartTime')
          checkArrays.push('enrollEndTime')
        }
        let ret = true
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            this.$message.error(valid)
            ret = false
          }
        })

        return ret
      },
      // 预算价格变更
      budgetAmountChange() {
        if (this.form.remunerationType === '1') {
          this.$refs.form.validateField('budgetAmount', (e) => {
            if (!e) {
              const amount = this.form.budgetAmount
              this.$bus.$emit('project.task.edit.budgetAmount', amount)
            }
          })
        } else {
          this.$refs.form.validateField('budgetAmount', (e) => {
            if (!e) {
              const amount = this.form.budgetAmount
              this.$bus.$emit('project.task.edit.budgetAmount', amount)
            }
          })
        }
      },
      // 快速估价确定
      estimateSubmit(estimateRadio) {
        const that = this
        const estimateData = this.estimateData
        estimateData.forEach(e => {
          if (e.label === estimateRadio) {
            const estimateVal = (e.priceVal * e.percentVal / 100).toFixed(2)
            that.form.budgetAmount = estimateVal
            this.estimateVisible = false
            return
          }
        })
      }
    }
  }

</script>

<style lang="less" scoped>

  .el-input{
    width: 20%;
  }
  .estimate-radio{
    color: #fff;
    width: 22px;
    overflow: hidden;
  }
  .estimate-item{
    width: 265px;
    margin-bottom: 0;
    .el-input-default{
      width: 163px!important;
    }
  }
  .estimate-bar{
    padding-bottom: 60px;
  }
  .estimate-input{
    position: relative;
  }
  .font-tips{
    padding-left: 100px;
    position: absolute;
    left: 0;
    bottom: -36px;
  }
  .font-x{
    width: 35px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .main-transfer {
    width: 200px;
  }

  .main-transfer-title {
    background-color: #f5f7fa;
    height: 40px;
    font-size: 16px;
    padding-left: 20px;
  }

  .main-transfer-list {
    height: 260px;
    overflow-y: scroll;
  }

  // 任务新增，基本信息样式调整
  .input-bar-0{
    width: 35%!important;
  }
  .input-bar-1{
    width: 40%;
    margin-bottom: 5px!important;
  }
  .input-bar-2{
    width: 60%;
    margin-bottom: 5px!important;
  }
  .input-bar-3{
    width: 100%;
    margin-bottom: 5px!important;
  }
  .input-bar-4{
    width: 35%!important;
  }
  .width-input-1{
    width: 100%!important;
  }
  .width-input-2{
    width: 35%!important;
  }
  .width-input-3{
    width: 30%!important;
  }
  .width-date{
    width: 200px!important;
  }
  .gray-bar{
    background: #f2f2f2;
    padding: 5px 0 0 0;
    margin-bottom: 20px;
  }
  .gray-active{
    margin-right:20px;
    padding: 15px 13px;
    &.active{
      background: #f2f2f2;
    }
  }
  .radio-top-bar{
    margin-bottom: -22px;
  }
  .noraml-height{
    height: 40px;
  }
</style>
